<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/jquery-3.6.1.min.js"></script>
  <script src="js/bootstrap.min.js" ></script>
</head>
<body>
<h1>用户列表</h1>
<br/><br/>
<div class="with:80%">
  <table class="table table-hover">
    <thead>
    <!-- 表头信息-->
    <tr>
      <th>#</th>
      <th>User Name</th>
      <th>Password</th>
      <th>Age</th>
      <th>Reg Time</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <!-- 表循环展示用户信息-->
    <tr  th:each="user : ${page.toList()}">
      <th scope="row" th:text="${user.id}">1</th>
      <td th:text="${user.username}">neo</td>
      <td th:text="${user.password}">Otto</td>
      <td th:text="${user.age}">6</td>
      <td th:text="${#dates.format(user.regTime, 'yyyy/MMM/dd HH:mm:ss')}"></td>
      <td><a th:href="@{/toEdit(id=${user.id})}">edit</a></td>
      <td><a th:href="@{/delete(id=${user.id})}"  onclick="return confirm('确认是否删除此用户？')"  >delete</a></td>
    </tr>
    </tbody>
  </table>
  <!-- 引入分页内容-->
  <div th:include="page :: pager" th:remove="tag"></div>

  <!-- 类似jsp中的include -->

</div>
<div class="form-group">
  <div class="col-sm-2 control-label">
    <a href="/add" th:href="@{/add}" class="btn btn-info">add</a>
  </div>
</div>
</body>
</html>